<template>
  <div class="app-container">
    <!-- <t-Search /> -->
    <el-row>
        <el-col :span="22">
          <el-form :model="param" :inline="true" label-width="70px">
            <el-form-item label="单据号" style="width:260px">
              <el-input v-model="param.returnBoxNo" clearable placeholder="请输入单据号"></el-input>
            </el-form-item>
            <el-form-item label="业务编号" style="width:260px">
              <el-input v-model.trim="param.businessNo" clearable placeholder="请输入业务编号"> </el-input>
            </el-form-item>
            <el-form-item label="堆场名称" style="width:260px">
              <el-input v-model="param.yardName" clearable placeholder="请输入堆场名称"></el-input>
            </el-form-item>
            <el-form-item label="单据类型" v-if="orderTypeval != '10'" style="width:260px">
              <el-select v-model="param.returnBoxType" clearable style="width:100%" placeholder="选择单据类型">
                <el-option v-for="item in param.returnTypeOptions" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="箱东公司" style="width:260px">
              <el-input v-model="param.companyName" clearable placeholder="请输入箱东公司名称"></el-input>
            </el-form-item>
            <el-form-item label="订单号" style="width:260px">
              <el-input v-model="param.orderNo" clearable placeholder="请输入订单号"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2">
          <el-row justify="center">
            <el-col :span="24" class="text-center"><el-button @click="handleReSet" :icon="Refresh">重置</el-button></el-col>
            <el-col :span="24" class="text-center marginTop15"><el-button @click="getTableData" :icon="Search" type="primary">查询</el-button></el-col>
          </el-row>
        </el-col>
    </el-row>

    <cz-tages :bottomLine="true" :typeList="typeList" @handleTypeChange="handleTypeChange"></cz-tages>

    <Table v-bind="table" style="width: 100%;" @pageChange="onTablePageChange" @showInfo="showInfo"
      @downloadFile="downloadFile" @preview="preview" @showReturnRecord="showReturnRecord" @activeAddPacking="activeAddPacking">
    </Table>

    <!--drawer -->
    <el-drawer v-model="param.drawer" size="50%" title="I am the title" :with-header="false">
      <span style="font-weight: 700;font-size: 15px;">
        <span style="width:3px;height:20px;background-color: #2158F3;"> &nbsp</span>租箱订单选择
      </span>
      <!-- <el-input v-model="param.orderNo" @input="getTableData" type="text" placeholder="请输入租箱订单号"
        style="float: right;margin-top: 40px;" /> -->
      <el-form inline style="margin-top: 40px;">
        <el-form-item label="箱型" style="width:150px">
          <el-select v-model="searchForm.boxType" @change="choiceOrders" style="width:100%" placeholder="选择箱型">
            <el-option v-for="item in param.boxTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="箱况" style="width:150px">
          <el-select v-model="searchForm.boxCondition" @change="choiceOrders" style="width:100%" placeholder="选择箱况">
            <el-option v-for="item in param.boxCaseOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="客户">
          <el-input v-model="searchForm.agentName" @input="choiceOrders" type="text" placeholder="请输入租箱订单号" />
        </el-form-item>
      </el-form>
      <el-table :data="param.selectTable" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="orderNo" label="订单号" width="200"> </el-table-column>
        <el-table-column prop="boxType" label="箱型"> </el-table-column>
        <el-table-column prop="boxQuantity" label="箱量"> </el-table-column>
        <!-- <el-table-column prop="boxCondition" label="总重"> </el-table-column> -->
        <el-table-column prop="boxCondition" label="箱况"> </el-table-column>
        <el-table-column prop="planPickupDate" label="预计还箱日期" width="160"> </el-table-column>
        <el-table-column prop="createTime" label="下单日期" width="160"> </el-table-column>
        <el-table-column prop="carryCityName" label="还箱城市"> </el-table-column>
        <el-table-column prop="returnCityName" label="还箱城市"> </el-table-column>
        <el-table-column prop="agentName" label="客户"> </el-table-column>
      </el-table>
      <div style="margin-top: 40px;height: 50px;">
        <el-button @click="handleChoice" type="primary" style="float: right;width: 100px;"> 确定 </el-button>
      </div>
    </el-drawer>

    <el-drawer v-model="param.drawerSelectBox" title="I am the title" :with-header="false">
      <span style="font-weight: 700;font-size: 15px;">
        <span style="width:3px;height:20px;background-color: #2158F3;"> &nbsp</span>集装箱选择
      </span>
      <el-input v-model="param.containerNo" @input="getBoxTableData" type="text" placeholder="请输入箱号"
        style="float: right;margin-top: 40px;" />
      <div style="height:40px"></div>
      <el-table :data="param.selectBoxTable" @selection-change="handleSelectionBoxChange" style="margin-top: 90px;">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="containerNo" label="箱号" width="200"> </el-table-column>
        <el-table-column prop="boxType" label="箱型" width="180"> </el-table-column>
        <el-table-column prop="boxCondition" label="箱况"> </el-table-column>
        <el-table-column prop="inDays" label="堆存天数" width="180"> </el-table-column>
      </el-table>
      <div style="margin-top: 40px;height: 50px;">
        <el-button @click="handleChoiceBox" type="primary" style="float: right;width: 100px;"> 确定 </el-button>
      </div>
    </el-drawer>

    <!-- 开还箱单 -->
    <el-drawer v-model="param.drawer1" :show-close="false">
      <div style="font-weight: 700;font-size: 20px;margin-top: -20px;">
        <el-row>
          <el-col :span="6">
            <span class="_before">开还箱单</span>
          </el-col>
        </el-row>
      </div>

      <div style="margin-top: 40px;">
        <span>租箱订单</span>
        <el-button @click="choiceOrders" icon="edit" size="small" style="float: right;">选择租箱订单</el-button>
      </div>
      <el-table :data="param.rentOrderTable" style="width: 100%;">
        <el-table-column prop="orderNo" label="订单号" width="200"> </el-table-column>
        <el-table-column prop="planPickupDate" label="预计还箱日期" width="180"> </el-table-column>
        <el-table-column prop="createTime" label="下单日期"> </el-table-column>
      </el-table>
      <div>
        <div style="margin-top: 40px;">箱型量 {{ getFormatNum(param.rentBoxTable) }}</div>
      </div>

      <el-form style="margin-top: 40px;">
        <template v-if="param.oprType != 10">
          <el-form-item>
            <div>放箱指令号</div>
            <el-input v-model="param.instruction" style="width: 100%;" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <div>还箱单有效期范围</div>
            <el-date-picker v-model="param.returnValidityPeriod" type="daterange" range-separator="~"
              start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;" />
          </el-form-item>
        </template>
        <el-form-item>
          <div>堆场名称</div>
          <yardSelect v-model="param.yardName" :selectName="'yardName'" :needInfo="true" @yardId="yardInfoData"
            style="width:100%" :placeholder="'请输入堆场名称'">
          </yardSelect>
        </el-form-item>
        <el-form-item>
          <div>堆场地址</div>
          <el-input v-model="yardInfo.yardAddress" disabled style="width: 100%;" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <div>联系人</div>
          <el-input v-model="yardInfo.contacts" disabled style="width: 100%;" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <div>联系电话</div>
          <el-input v-model="yardInfo.tel" disabled style="width: 100%;" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <div>堆场作业时间</div>
          <el-input v-model="yardInfo.workTime" disabled style="width:100%" placeholder="请输入" />
        </el-form-item>
        <el-form-item v-if="param.oprType == 10">
          <div>箱属内容</div>
          <el-input v-model="yardInfo.boxOwnerContent" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>

      <div style="padding: 40px 0;">
        <el-button @click="choiceBox" :disabled="!yardInfo.id" icon="edit" style="float: right;">选择箱号</el-button>
      </div>
      <el-table :data="selectBoxList">
        <el-table-column prop="containerNo" label="箱号" />
        <!-- <el-table-column prop="boxType" label="箱型" /> -->
      </el-table>

      <div style="margin-top: 40px;">
        <span> {{ returnTypeFilter(param.oprType) }}附件 </span>
      </div>
      <img-upload />
      <div style="margin-top: 40px;">备注 </div>
      <el-input v-model="param.remark" type="textarea" placeholder="请输入内容" />
      <div style="margin-top: 40px;height: 50px;">
        <el-button @click="handleSubmit" type="primary" style="float: right;width: 100px;"> 提交
        </el-button>
      </div>

    </el-drawer>

    <!-- 还箱记录 -->
    <el-drawer v-model="param.drawer3" :with-header="false">
      <span class="_before">还箱记录</span>
      <div style="float: right;margin-top: 30px;">
        <span>应还箱量：{{ rowData.totalReturnQuantity }} 个</span> &nbsp;
        <span>实还箱量：{{ rowData.returnedQuantity }} 个</span>
      </div>
      <el-table :data="packingRecord" style="margin-top: 50px;">
        <el-table-column prop="containerNo" label="箱号" width="180" align="center" />
        <el-table-column prop="boxType" label="箱型" align="center"/>
        <el-table-column prop="boxCondition" label="箱况" align="center"/>
        <el-table-column prop="returnDate" label="还箱日期" width="200" align="center">
          <template #default="scope">{{ formatDate(scope.row.returnDate,2) }}</template>
        </el-table-column>
      </el-table>
    </el-drawer>
    <!-- 还箱单详情 -->
    <indexInfo ref="indexInfoRef" :isAgent="true"></indexInfo>
  </div>
</template>

<script setup lang="ts">
import { downloadIamge } from '@/utils/download'
import Table from '@/components/table'
import { formatDate } from '@/utils'
import czTages from '@/components/chengzhiTags'
import imgUpload from '@/components/upload/index.vue'
import yardInfoCard from '@/views/components/boxYard/yardInfo.vue'
import { getTable as getAgentTable, getReturnData, addReturn, cancelReturn, downloadReturn,agentStatusCount } from '@/api/orderManage/returnBox'
import { getTable, getReturnData as getReturnEastData, updateReturnMark, updateReturnDate, updateDetailFile, finishReturnBoxDetail } from '@/api/orderManage/returnBoxDetail'
import indexInfo from '@/views/components/huanXiangManage/indexInfo.vue'
import { getTable as getOrders } from '@/api/orderManage/index.ts'
import yardSelect from '@/components/citySelect/yardSelect.vue';
import { getTable as getBoxTable } from '@/api/boxManage/index'
import boxSelect from '@/components/citySelect/boxSelect.vue';
import { getInterValDays } from '@/utils'

import { computed, onMounted, onActivated, reactive, ref, watch,nextTick } from 'vue';
import {
  Plus,
  Delete,
  Edit,
  Message,
  Search,
  Download,
  Upload,
  Refresh,
  UploadFilled,
  ChatLineSquare
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'

const param = reactive({
  pageNum: 1,
  pageSize: 10,
  returnBoxType: '',
  //table
  boxCaseOptions: [ //5-全新   10-次新  15-适货 20-混提(次新或者适货)
    { value: '15', label: '适货', },
    { value: '10', label: '次新', },
    { value: '20', label: '混提', },
    { value: '5', label: '全新', },
  ],
  boxTypeOptions: [ // 5 - 40HQ   10 - 40GP  15 - 20HQ   20 - 20GP
    { value: '5', label: '40HQ', },
    { value: '10', label: '40GP', },
    { value: '15', label: '20HQ', },
    { value: '20', label: '20GP', },
  ],
  returnTypeOptions: [ //5-还箱单 10-箱属  15-还箱令
    // { value: '5', label: '还箱单', },
    { value: '10', label: '箱属', },
    { value: '15', label: '还箱令', },
  ],
  
  //开还箱单列表
  rentOrderTable: [{ orderNo: '', planPickupDate: '', createTime: '' }],
  rentBoxTable: [{ boxType: '', boxQuantity: '', boxCondition: '' }],
  selectTable: [{ orderNo: '', planPickupDate: '', createTime: '', boxType: '', boxQuantity: '', boxCondition: '' }],
  selectBoxTable: [{ containerNo: '', boxType: '', inDays: '', boxCondition: '' }],
  businessNo:'',
});
const table = reactive({
  // 列表数据（必传）
  data: [],
  // 表头内容（必传，注意格式）
  header: [
    { key: 'returnBoxNo', colWidth: '180', title: '单据号', type: '<a>', command: 'showInfo', isCheck: true },
    { key: 'businessNo', colWidth: '150', title: '业务编号', type: 'text', isCheck: true },
    { key: 'orderList', key2: 'orderNo', colWidth: '180', title: '订单号', type: '/', isCheck: true },
    { key: 'returnBoxType', colWidth: '80', title: '单据类型', type: 'filter', filter: { 5: '还箱单', 10: '箱属', 15: '还箱令' }, isCheck: true },
    { key: 'yardName',colWidth: '100', title: '堆场名称', type: 'text', isCheck: true },
    { key: 'totalReturnQuantity', colWidth: '80', title: '总箱量', type: 'totalQuantity', isCheck: true },
    { key: 'returnedQuantity', colWidth: '80', title: '已还箱量', type: 'totalQuantity', isCheck: true },
    { key: 'totalReturnQuantity',key2: 'returnedQuantity', colWidth: '80', title: '未还箱量', type: 'quantity', isCheck: true },
    { key: 'returnValidityPeriodStart', colWidth: '150', key2: 'returnValidityPeriodEnd', title: '还箱单据有效期范围', type: 'range', isCheck: true },
    { key: 'residueReturnDays', colWidth: '140', title: '还箱令有效期天数', type: 'days', after: '天', isCheck: true },
    { key: 'companyName', colWidth: '230', title: '集装箱公司', type: 'text', isCheck: true },
    { key: 'boxEastOperatorUserName', title: '联系人',colWidth: '80', type: 'text', isCheck: true },
    // { key: 'boxEastOperatorUserTel',colWidth: '140', title: '联系电话', type: 'phoneNumber',areaCode:"boxEastOperatorUserAreaCode", isCheck: true },
    { key: 'status', colWidth: '80', title: '状态', type: 'statusHuanxiang', isCheck: true },
    {
      key: 'operate',
      colWidth: '150',
      title: '操作',
      type: 'operate',
      isCheck: true,
      fixed: 'right',
      buttons: [
        {
          // icon: 'Download',
          command: 'downloadFile',
          name: '下载',
          isShow: (row: any) => {
            // return row.status <= 10;
            return JSON.parse(row.pdfFile)!='';
          },
        },
        {
          command: 'preview',
          name:'预览'
        },
        {
          // icon: 'ChatLineSquare',
          command: 'showReturnRecord', //param.drawer3
          name: '还箱记录',
        }

      ],
    },
  ],
  // table配置项（必传）
  config: {
    isSelection: true,
    isList: false,
    isPagination: true, // 是否分页
    total: 0, // 分页总数
    loading: false
  },
});

// const typeList = computed(() => {
//   const list = [{ id: 0, name: '全部' }, { id: 5, name: '已发放' }, { id: 10, name: '已下载' }, { id: 15, name: '还箱中' },  { id: 20, name: '已完成' }]
//   return list
// })
const typeList = ref([
    { id: 0, name: '全部',num:0 },
    { id: 5, name: '已发放',num:0 },
    { id: 10, name: '已下载',num:0 },
    { id: 15, name: '还箱中',num:0 },
    { id: 20, name: '已完成',num:0 },
])
// 还箱单状态: 5-已发放 10-已下载 15-还箱中 20-已完成 25-已过期
// 查询各还箱状态的数量
const getAgentStatusCount = async(data:any) => { 
  await agentStatusCount(data).then((res: any) => {
    if(res.code == '00000'){
      typeList.value.forEach(item => { 
        item.num = 0
        res.data.forEach(item1 => { 
          if(item.id == 0){ //全部
            item.num += item1.totalQty
          }else if(item.id == 5 && item1.status == 5){ //已发放
              item.num += item1.totalQty
          }else if(item.id == 10 && item1.status == 10){ //已下载
              item.num += item1.totalQty
          }else if(item.id == 15 && item1.status == 15){ //还箱中
              item.num += item1.totalQty
          }else if(item.id == 20 && item1.status == 20){ //已完成
              item.num += item1.totalQty
          }
        })
      })
    }
  })
}

const route = useRoute();
const orderTypeval = ref("")

onActivated(() => {
   if(route.query.refNo){
    param.returnBoxNo=route.query.refNo
  }
   nextTick(() => {
       if(route.name=='JKhuanXiangManageHD1'){
          orderTypeval.value = "10"
        }else{
          orderTypeval.value = "5"
        }
    getTableData()
    })
})

// //监听 tagName
// import orderInfo from '../../../store/modules/order'
// watch(() => orderInfo().tagName, (val: any) => {
//   console.log(val)
//   param.tagName = val
//   getTableData();
// })
// const route = useRoute();
// const paramsAndQuery = computed(() => ({
//   query: route.name
// }));
// watch(
//   paramsAndQuery,
//   (newVal, oldVal) => {
//     if(newVal.query=='JKhuanXiangManageHD1'){
//       param.tagName = 'returnBox'
//     }else{
//       param.tagName = 'rent'
//     }
//   getTableData()
//   },
//   {immediate:true}
// );
function handleTypeChange(val: any) {
  param.status = val
  getTableData()
}

/*货代: 查询还箱单分页列表 
*/
function getTableData() {
  let data = {
    businessNo: param.businessNo,
    pageNum: param.pageNum,
    pageSize: param.pageSize,
    returnBoxNo: param.returnBoxNo?.trim(),
    yardName: param.yardName?.trim(),
    orderType:orderTypeval.value,
    returnBoxType: param.returnBoxType,
    orderNo: param.orderNo?.trim(),
    companyName: param.companyName?.trim(),
    status: param.status,

  }
  table.config.loading = true;
  // 获取列表数据
  getAgentStatusCount(data)
  getAgentTable(data).then((res: any) => {
    table.data = res.data.list;
    table.data.forEach((item: any) => {
      let orderList = JSON.parse(item.orderList)
      item.orderNoList = orderList.map((item: any) => item.orderNo).join('/')
    })
    table.config.total = res.data.total;
  })
  table.config.loading = false;
}
// 重置
function handleReSet() {
  param.businessNo = ''
  param.returnBoxNo = null
  param.yardName = null
  param.returnBoxType = ''
  param.companyName = null
  param.orderNo = null
  getTableData()
}


//分页
function onTablePageChange(page: any) {
  param.pageNum = page.pageNum;
  param.pageSize = page.pageSize;
  getTableData();
};


//箱号组件 emit
const boxInfo = ref({})
const boxInfoData = (id: string, info: any) => {
  console.log("--------------------")
  console.log(info)
  if (info) {
    boxInfo.value = info
  }
}


//下载---------------
//packing
const downloadFile = (rowData: any) => {
  if (rowData.pdfFile) {
    let pdfFile = JSON.parse(rowData.pdfFile)
    pdfFile=pdfFile[0]
    if (!pdfFile.url) return ElMessage.error('chengzhi 未找到文件')
    downloadIamge(pdfFile.url,pdfFile.originalFileName || new Date(Date.now()+28800000).toISOString())
    downloadReturn(rowData.id).then(res => {
       getTableData()
    })
  } else {
    console.log(rowData)
    ElMessage.error('chengzhi 未找到文件')
  }
}

// 添加还箱记录
const rowData = ref({})
const activeAddPacking = (row: any) => {
  rowData.value = row
  let boxType = JSON.parse(rowData.value.containerCountList)[0].boxType
  rowData.value.boxType = boxTypeFilter(boxType)
  // getReturnEastData(row.id).then((res: any) => {
  //   returnInfo.value = res.data
  // })

  param.drawerReturnBox = true
}


//查看还箱记录
const packingRecord = ref([])
const showReturnRecord = (row: any) => {
  param.drawer3 = true
  rowData.value = row
  const data = {
    pageNum: 1,
    pageSize: 200,
    returnBoxId: row.id
  }
  getTable(data).then((res: any) => {
    let list = res.data.list
    list.forEach((item: any) => {
      item.boxCondition = boxConditionFilter(item.boxCondition)
      item.boxType = boxTypeFilter(item.boxType)
      item.returnDate = formatDate(item.returnDate, 2)
    })
    packingRecord.value = list
  })
}



//查看还箱单详情
const indexInfoRef=ref()
const showInfo = (row: any) => {
  indexInfoRef.value.openBox(row)
};
const preview = (row: any) => {
  indexInfoRef.value.openBox(row)
}

//-------分割成组件
// 去开单 type 5-还箱单 10-箱属 15-还箱令  
const handleCreateOrder = (type: number) => {
  param.drawer1 = true
  param.oprType = type
}
//开还箱单
const handleSubmit = (drawer: string) => {
  param.drawer1 = false
  handleAddReturn()
}

//选择租箱订单
const searchForm = reactive({
  agentName: '',
  boxType: '5',
  boxCondition: '5',
})
const choiceOrders = () => {
  const data = {
    pageNum: 1,
    pageSize: 200,
    status: 5,
    agentName: searchForm.agentName,
    boxType: searchForm.boxType,
    boxCondition: searchForm.boxCondition,
  }
  getOrders(data).then(res => {
    let list = res.data.list;
    list.forEach((el: any) => {
      el.boxType = boxTypeFilter(el.boxType)
      el.boxCondition = boxConditionFilter(el.boxCondition)
    });
    param.selectTable = list
  });

  param.drawer = true
}
let selectList = ref([])
const handleChoice = () => {
  param.drawer = false
  param.rentOrderTable = []
  param.rentBoxTable = []
  selectList.value.forEach((el: any) => {
    console.log(param.rentOrderTable)
    param.rentOrderTable.push({ orderNo: el.orderNo, planPickupDate: el.planPickupDate, createTime: el.createTime, id: el.id })
    param.rentBoxTable.push({ boxType: el.boxType, boxQuantity: el.boxQuantity, boxCondition: el.boxCondition })
  })
  // console.log(param.rentOrderTable)
}
const handleSelectionChange = (list: any) => {
  selectList.value = list
  console.log(list)
}
//选择集装箱
const choiceBox = () => {
  getBoxTableData()
  param.drawerSelectBox = true
}
let selectBoxList = ref([])
const handleChoiceBox = () => {
  param.drawerSelectBox = false
}
const handleSelectionBoxChange = (list: any) => {
  selectBoxList.value = list
  console.log(list)
}

//堆场组件 emit 
const yardInfo = ref({})
const yardInfoData = (id: string, info: any) => {
  // param.location = id
  console.log(info)
  if (info) {
    param.yardName = info.yardName
    yardInfo.value = info
  }
}

//获取 箱子列表
function getBoxTableData() {
  // console.log("searchForm.boxType")
  // console.log(searchForm.boxType)
  let data = {
    statusList: [5], //堆存中
    containerNo: searchForm.containerNo,
    boxType: searchForm.boxType - 0,
    boxCondition: searchForm.boxCondition - 0,
    // boxEastYardId: yardInfo.value.id,
    pageNum: 1,
    pageSize: 200,
  };
  getBoxTable(data).then(res => {
    let list = res.data.list;
    list.forEach((el: any) => {
      el.boxType = boxTypeFilter(el.boxType)
      el.boxCondition = boxConditionFilter(el.boxCondition)
    });
    param.selectBoxTable = list;
  });
}

//---------


//过滤
const boxTypeFilter = (val: any) => {
  let result = ''
  const boxConditionList = [{ value: 5, label: '40HQ' }, { value: 10, label: '40GP' }, { value: 15, label: '20HQ' }, { value: 20, label: '20GP' }]
  boxConditionList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
const boxConditionFilter = (val: any) => {
  let result = ''
  const boxTypeList = [{ value: 15, label: '适货' }, { value: 10, label: '次新' }, { value: 20, label: '混提' },{ value: 5, label: '全新' }]
  boxTypeList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
//  //5-还箱单 10-箱属  15-还箱令
const returnTypeFilter = (val: any) => {
  let result = ''
  const boxTypeList = [{ value: 5, label: '还箱单' }, { value: 10, label: '箱属' }, { value: 15, label: '还箱令' }]
  boxTypeList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}

//-----------------------
//
const changeReturnDate = (time: any) => {
  rowData.value.overdueDays = getInterValDays(time, rowData.value.returnValidityPeriodEnd)
}

//箱型量
const getFormatNum = (arry: any) => {
  let type = arry[0].boxType
  let num = 0
  arry.forEach((el) => {
    num = num + (el.boxQuantity - 0)
  })
  if (type) {
    return type + '*' + num
  } else {
    return 0
  }
}


//
//开还箱单
const handleAddReturn = () => {
  let orderList = []
  let containerCountList = []
  param.rentOrderTable.forEach((el: any) => {
    orderList.push({ "orderId": el.id, "orderNo": el.orderNo })
  })
  let containerNoList: any[] = []
  selectBoxList.value.forEach((el: any) => {
    console.log(el)
    containerNoList.push({ "containerId": el.id, "containerNo": el.containerNo })
    containerCountList.push({ boxType: el.boxTypeCode, boxCondition: el.boxConditionCode, boxQuantity: el.boxQuantity })
  })
  const data = {
    "returnBoxType": param.oprType,
    "orderList": JSON.stringify(orderList), //"[{\"orderId\":1,\"orderNo\":\"2222\"}]",
    "boxEastYardId": yardInfo.value.id,
    "containerNoList": JSON.stringify(containerNoList), //"[{\"containerId\":1,\"containerNo\":\"2222\"}]",
    "containerCountList": "[{\"boxType\":5,\"boxCondition\":\"10\",\"boxQuantity\":\"11\"}]", //JSON.stringify(containerCountList)
    detailFileList: null
  }

  if (param.returnBoxType == 5) { //5-还箱单 
    data.instruction = param.instruction //指令号
    data.returnValidityPeriodStart = param.returnValidityPeriod[0]
    data.returnValidityPeriodEnd = param.returnValidityPeriod[1]
  }
  if (param.returnBoxType == 10) {// 10-箱属  
    data.boxOwnerContent = "AASSDF1234567"
    data.detailFileList = "AASSDF1234567"
  }
  if (param.returnBoxType == 15) {// 15-还箱令
    data.detailFileList = "AASSDF1234567"
  }

  addReturn(data).then((res: any) => {
    param.returnId = res.data.id
  })
}

</script>

<style scoped lang="scss">
.el-form-diy {
  padding: 10px;

  div {
    width: 100%;
  }
}
</style>
